{{define "title"}}
  {{ .BuildPage.HumanStatus}}
    -
  {{ with .BuildPage.Build -}}
    {{ with .Builder }}{{ .Builder }}{{ end }}
    {{ if .Number }}{{ .Number }}{{ else }}{{ .Id }}{{ end }}
  {{- end }}
{{end}}

{{define "head"}}
<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
<link rel="stylesheet" href="/static/common/css/build.css" type="text/css">
<script>
  const timelineData = JSON.parse({{ .BuildPage.Timeline }});
  const useTabs = true;
  // If true, the blamelist tab contains the blamelist.
  // If false, the blamelist tab should reload the page to force the blamelist to load.
  const blamelistLoaded = {{ if .BuildPage.BlamelistError }}false{{ else }}true{{ end }};
  const buildbucketId = '{{ .BuildPage.Id }}';
</script>
<script type="text/javascript" src="https://www.gstatic.com/feedback/js/help/prod/service/lazy.min.js"></script>
<script src="/static/common/js/build.js"></script>
{{end}}

{{define "interval"}}
  {{ if .Started }}
    <span class="duration"
          data-starttime="{{ .Start | formatTime }}"
          {{ if .Ended -}}
            data-endtime="{{ .End | formatTime }}"
          {{- end }}>
          ( {{ .Duration | humanDuration }} )</span>
  {{ end }}
{{end}}

{{define "favicon"}}
<link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/
{{- with .BuildPage.Status.String -}}
  {{- if eq . "STARTED" -}} yellow
  {{- else if eq . "SUCCESS" -}} green
  {{- else if eq . "INFRA_FAILURE" -}} purple
  {{- else if eq . "FAILURE" -}} red
  {{- else if eq . "CANCELED" -}} brown
  {{- else if eq . "SCHEDULED" -}} gray
  {{- else -}} milo
  {{- end -}}
{{- end -}}-32.png">

{{end}}

{{define "step"}}
<li class="{{ if eq .Step.Status.String "SUCCESS" }}green{{ end }}
           {{- if .Children }} substeps
             {{- if .Collapsed }} collapsed{{ end }}
           {{- end }}">
  <div class="status {{.Step.Status}} result">
      {{ template "interval" .Interval }}
    <b>{{.ShortName}}</b>
    <span class="summary-markdown">
      {{ .Step.SummaryMarkdown | renderMarkdown }}
    </span>
  </div>
  <ul>
    {{ range .Logs }}
      <li class="sublink{{ if startswith .Name "$" }} debug-log{{ end }}">
        <a href="{{ .ViewUrl }}">{{ .Name }}</a>
        {{- if eq .Name "stdout" "stderr" }}
          [{{ logdogLink . true }}]
        {{- end }}
      </li>
    {{ else }}
      {{ if not .Children }}
        <li class="sublink"> - no logs - </li>
      {{ end }}
    {{ end }}
  </ul>
  {{ if .Children }}
    <ol>
    {{ range .Children  }}
      {{ template "step" . }}
    {{ end }}
    </ol>
  {{ end }}
</li>
{{ end }}

{{define "body"}}
  {{ template "overlay" .}}
  <div class="content">
    <h1>
    {{ with .BuildPage.BuilderLink }}
      Builder {{ .HTML }}
    {{ end }}
    Build {{ .BuildPage.Link.HTML }}
    {{ range .BuildPage.Banners }}
      <img src="/static/common/logos/{{.Img}}" alt="{{.Alt}}" width="25px">
    {{ end }}

    </h1>

    {{ if .BuildPage.Build.ShouldShowCanaryWarning }}
      <div class="canary-warning">
        WARNING: This build ran on a canary version of LUCI. If you suspect it
        failed due to infra, retry the build. Next time it may use the
        non-canary version.
      </div>
    {{ end }}

    <div id="tabs" style="display: none">
      <ul>
        <li><a href="#overview-tab">Overview</a></li>
        <li><a href="#related-tab">Related Builds</a></li>
        <li><a href="#timeline-tab">Timeline</a></li>
        <li><a href="#blamelist-tab">Blamelist</a></li>
      </ul>
      <div id="overview-tab">
        {{ template "overview" . }}
        {{ template "attributes" . }}
      </div>
      <div id="timeline-tab" style="display: none;">{{ template "timeline_tab" . }}</div>
      <div id="related-tab" style="display: none;">{{ template "related_tab" .BuildPage }}</div>
      <div id="blamelist-tab" style="display: none;">{{ template "blamelist_tab" . }}</div>
    </div>
  </div>
{{end}}

{{define "overlay"}}
  <div id="modal-overlay">
    <div id="retry-build-modal" class="modal-content">
      <h1>Retry Build</h1>
      <p>Note: this doesn't trigger anything else (e.g. CQ).</p>
      <form id="retry-build-form" action="/actions/retry_build" method="POST" style="overflow: auto;">
        {{ .XsrfTokenField }}
        <input name="buildbucket-id" type="hidden" value="{{.BuildPage.Id}}">
        <input name="retry-request-id" type="hidden" value="{{.RetryRequestID}}">
        <div style="float: right; margin: 0;">
          <input id="dismiss-retry-build-button" type="button" value="Dismiss">
          <input type="submit" value="Confirm">
        </div>
      </form>
    </div>
    <div id="cancel-build-modal" class="modal-content">
      <h1>Cancel Build</h1>
      <form id="cancel-build-form" action="/actions/cancel_build" method="POST" style="overflow: auto;">
        {{ .XsrfTokenField }}
        <input name="buildbucket-id" type="hidden" value="{{.BuildPage.Id}}">
        Reason:<br/>
        <textarea name="reason" form="cancel-build-form" required style="width: 100%; box-sizing: border-box; resize: none;"></textarea><br>
        <div style="float: right; margin: 0;">
          <input id="dismiss-cancel-build-button" type="button" value="Dismiss">
          <input type="submit" value="Confirm">
        </div>
      </form>
    </div>
  </div>
{{end}}

{{define "overview"}}
  <div id="overview" class="column">
    {{ range .BuildPage.Errors }}
      <p class="errors status FAILURE">Error while rendering page: {{.}}</p>
    {{ end }}
    <h2>Overview</h2>
    <div class="result status {{.BuildPage.Status}}">
      <div class="main-status">{{ .BuildPage.HumanStatus }}{{ if eq .BuildPage.Status.String "CANCELED" }} (by {{ or .BuildPage.CanceledBy "UNKNOWN"}}){{ end }}</div>
      {{ with .BuildPage.SummaryMarkdown }}
        {{ . | renderMarkdown }}
      {{ end }}
    </div>

    <h2>Actions</h2>
    <input id="retry-build-button" type="button" value="Retry Build"
      {{if not .BuildPage.EndTime}} disabled title="this build is still running"
      {{else if not .BuildPage.CanRetry}} disabled title="unauthorized to retry the build"
      {{end}}
    >
    <input id="cancel-build-button" type="button" value="Cancel Build"
      {{if .BuildPage.EndTime}} disabled title="this build has already ended"
      {{else if not .BuildPage.CanCancel}} disabled title="unauthorized to cancel the build"
      {{end}}
    >
    <br>

    {{ with .BuildPage.Input }}
      <h2>Input</h2>
      <table>
        {{ with .GitilesCommit }}
          <tr>
            <td class="left">Revision</td>
            <td><a href="https://{{ .Host }}/{{ .Project }}/+/{{ .Id }}">{{ .Id }}</a>
            {{ with .Position }}(CP #{{ . }}){{ end }}
            </td>
          </tr>
        {{ end }}

        {{ range .GerritChanges }}
          <tr>
            <td class="left">Patch</td>
            <td>
              <a href="https://{{ .Host }}/c/{{ .Change }}/{{ .Patchset }}">
              {{ .Change }} (ps #{{ .Patchset }})
              </a>
            </td>
          </tr>
        {{ end }}
      </table>
    {{ end }}

    <h2>Infra</h2>
    <ul>
      <li>Buildbucket ID: {{ .BuildPage.BuildbucketLink.HTML }}</li>

      {{ with .BuildPage.Infra }}
        {{ with .Swarming }}
          <li>
            Swarming Task:
            {{ if .TaskId }}
              <a href="https://{{ .Hostname }}/task?id={{ .TaskId }}&o=true&w=true">
                {{ .TaskId }}
              </a>
            {{ else }}
              N/A
            {{ end }}
          </li>
          <li>Bot: {{ . | botLink }}</li>
        {{ end }}
      {{ end }}
      <li>
        Recipe: {{ .BuildPage.RecipeLink.HTML }}
      </li>
    </ul>

    <h2>Timing</h2>
    <table class="info" width="100%">
      <tr class="alt">
        <td class="left">Create</td>
        <td>{{ .BuildPage.CreateTime | toTime | localTime "N/A" }}</td>
      </tr>
      <tr>
        <td class="left">Start</td>
        <td>{{ .BuildPage.StartTime | toTime | localTime "N/A" }}</td>
      </tr>
      <tr class="alt">
        <td class="left">End</td>
        <td>{{ .BuildPage.EndTime | toTime | localTime "N/A" }}</td>
      </tr>
      <tr>
        <td class="left">Pending</td>
        <td id="duration">{{ duration .BuildPage.CreateTime .BuildPage.StartTime .BuildPage.EndTime .BuildPage.Now }}</td>
      </tr>
      <tr class="alt">
        <td class="left">Execution</td>
        <td id="duration">{{ duration .BuildPage.StartTime .BuildPage.EndTime .BuildPage.Now }}</td>
      </tr>
    </table>

    {{ with .BuildPage.GetOutput.GetLogs }}
      <h2>Build Logs</h2>
      <ul>
      {{ range . }}
        <li>
          <a href="{{ .ViewUrl }}">{{ .Name }}</a>
          {{- if eq .Name "stdout" "stderr" }}
            [{{ logdogLink . true }}]
          {{- end }}
        </li>
      {{ end }}
      </ul>
    {{ end }}

    <h2>Build Steps</h2>
    Show:
    <input type="radio" name="hider" id="showExpanded" value="expanded"
           {{- if eq .BuildPage.StepDisplayPref "expanded" }} checked{{ end }}>
    <label for="showExpanded">Expanded</label>
    <input type="radio" name="hider" id="showDefault" value="default"
           {{- if eq .BuildPage.StepDisplayPref "default" }} checked{{ end }}>
    <label for="showDefault">Default</label>
    <input type="radio" name="hider" id="showNonGreen" value="non-green"
           {{- if eq .BuildPage.StepDisplayPref "non-green" }} checked{{ end }}>
    <label for="showNonGreen">Non-Green</label>

    <br/>
    Debug Logs:
    <input type="checkbox" name="debug_hider" id="showDebugLogs"
           {{- if .BuildPage.ShowDebugLogsPref }} checked{{ end }}>

    <ol id="steps" class="
      {{- if eq .BuildPage.StepDisplayPref "non-green" }} non-green{{ end -}}
      {{- if not .BuildPage.ShowDebugLogsPref }} hide-debug-logs{{ end -}}
      ">
      {{ range .BuildPage.Steps }}
        {{ template "step" . }}
      {{ end }}
    </ol>
  </div>
{{end}}

{{define "related_tab"}}
  {{ $now := .Now }}
  <h2>Related Builds</h2>
  {{ if .BuildSets }}
    <h3>Other builds with the same buildsets:</h3>
    {{ range .BuildSetLinks }}
      <li>{{ . }}</li>
    {{ end }}
    <div id="related-builds-table-container">Rendering...</div>
  {{ else }}
    <h3>No buildsets found</h3>
  {{ end }}
{{end}}

{{define "attributes"}}
<div id="attributes" class="column">
  <h2>Tags</h2>{{ template "tags_table" .BuildPage.GetTags }}
  <h2>Input Properties</h2>{{ template "properties_table" .BuildPage.InputProperties }}
  <h2>Output Properties</h2>{{ template "properties_table" .BuildPage.OutputProperties }}
</div>
{{end}}

<!--- Note: Properties have "Names" and Tags have "Keys".
            This is the standard nomenclature stemming from
            Buildbot Properties and Swarming Tags.
            We will preserve this nomenclature in the UI.-->
{{define "properties_table"}}
  {{ with . }}
    <table class="info BuildProperties" width="100%">
    <tr><th>Name</th><th>Value</th></tr>
    {{ range . }}
      <tr>
        <td class="left">{{.Name}}</td>
        <td class="middle"><abbr title="{{.Value}}">{{.Value | trimLong 1024}}</abbr></td>
      </tr>
    {{ end }}
    </table>
  {{ else }}
    <div>N/A</div>
  {{ end }}
{{end}}

{{define "tags_table"}}
  {{ with . }}
    <table class="info BuildTags" width="100%">
    <tr><th>Key</th><th>Value</th></tr>
    {{ range . }}
      <tr>
        <td class="left">{{.Key}}</td>
        <td class="middle">{{.Value}}</td>
      </tr>
    {{ end }}
    </table>
  {{ else }}
    <div>N/A</div>
  {{ end }}
{{end}}

{{define "blamelist_tab"}}
  <div id="changes" class="column">
    {{ if .BuildPage.Blame }}
      {{ with .BuildPage.BlamelistError }}
        <div class="errors failure">
          Got an error while loading blamelist, showing partial results.<br>
          Error: {{ . }}
        </div>
      {{ end }}
    <ol>
    {{ range .BuildPage.Blame }}
    <li>
      <h3>{{.Title}}</h3>
      <table class="info">
        <tbody>
          <tr>
            <td class="left">Changed by</td>
            <td class="value">
                {{ if .AuthorName }}{{ .AuthorName }} - {{ end }}
                {{ .AuthorEmail | obfuscateEmail }}
            </td>
          </tr>
          <tr>
            <td class="left">Changed at</td>
            <td class="value">{{ .CommitTime | localTime "N/A" }}</td>
          </tr>
          <tr>
            <td class="left">Repository</td>
            <td class="value">{{ .Repo }}</td>
          </tr>
          <tr>
            <td class="left">Branch</td>
            <td class="value">{{ .Branch }}</td>
          </tr>
          {{ with .Revision }}
            <tr>
              <td class="left">Revision</td>
              <td class="value">{{ .HTML }}</td>
            </tr>
          {{ end }}
        </tbody>
      </table>

      {{ if .Description }}
        <h3>Comments</h3>
        <pre class="comments">{{ .Description | formatCommitDesc }}</pre>
      {{ end }}

      {{ if .File }}
        <h3 class="files">Changed files</h3>
        <ul class="alternating">
          {{ range .File }}
          <li class="file">{{ . }}</li>
          {{ end }}
        </ul>
      {{ end }}

    </li>
    {{ end }} <!-- range .Build.Blame -->
    </ol>
    {{ else if .BuildPage.BlamelistError }}
      {{ if .BuildPage.ForcedBlamelist }}
        <div class="errors failure">
          Error while loading blamelist:<br>{{ .BuildPage.BlamelistError }}
        </div>
      {{ else }}
        Loading blamelist... (<a title="{{ .BuildPage.BlamelistError }}">why?</a>)
      {{ end }}
    {{ else }}
      No Blamelist
    {{ end }} <!-- if .Build.Blame -->
  </div>
{{end}}

{{define "timeline_tab"}}
  <div id="timeline">
    <div id="timeline-rendering">Rendering...</div>
  </div>
{{end}}
